<template>
  <el-scrollbar class="el-scrollbar-box" height="390px" noresize>
    <el-form class="params-config-box" ref="formRef" :model="form">
      <el-row :gutter="17">
        <el-col :span="8">
          <el-form-item label="背光亮度" prop="backlightBrightness">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.backlightBrightness"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="(value, key) in backlightBrightnessList"
                  :key="key"
                  :label="value"
                  :value="+key"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="休眠时间" prop="sleepTime">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.sleepTime"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in sleepTimeList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <span class="unit-title">min</span>
            </div>
          </el-form-item>

          <el-form-item label="系统电压" prop="voltage">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.voltage"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
                @change="changeVoltage"
              >
                <el-option
                  v-for="(item, index) in dicts_voltage"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

              <span class="unit-title">V</span>
            </div>
          </el-form-item>

          <el-form-item label="欠压门限" prop="undervoltage">
            <div class="flex align-center">
              <el-input class="ipt-box" v-model.number="form.undervoltage"></el-input>
              <span class="unit-title">V</span>
            </div>
          </el-form-item>

          <el-form-item label="助力比例" prop="assistPercentage">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model="form.assistPercentage"
                oninput="value=value.replace(/[^\d]/g, '')"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item label="限流门限" prop="currentlimiting">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model.number="form.currentlimiting"
                oninput="value=value.replace(/[^\d]/g, '')"
              ></el-input>
              <span class="unit-title">A</span>
            </div>
          </el-form-item>

          <el-form-item label="显示轮径" prop="showWheelsize">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model="form.showWheelsize"
                oninput="value=value.replace(/[^\d]/g, '')"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item label="车轮宽度" prop="tiresSize">
            <el-input
              class="ipt-box"
              v-model="form.tiresSize"
              oninput="value=value.replace(/[^\d]/g, '')"
            ></el-input>
          </el-form-item>

          <el-form-item label="助力档位数" prop="powerGear">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.powerGear"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in powerGearData"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="助力磁钢数" prop="assistStartMagnetNumber">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.assistStartMagnetNumber"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in assistStartMagnetNumberData"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="助力限速门限" prop="assistLimit">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.assistLimit"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option v-for="item in assistLimitData" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <span class="unit-title">km/h</span>
            </div>
          </el-form-item>

          <el-form-item label="恢复出厂设置" prop="factoryReset">
            <el-select
              class="ports-select-box"
              v-model="form.factoryReset"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="0"></el-option>
              <el-option label="NO" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="定速巡航功能" prop="cruise">
            <el-select
              class="ports-select-box"
              v-model="form.cruise"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="0"></el-option>
              <el-option label="NO" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="转把限速" prop="rotateHandleSpeedLimit">
            <el-select
              class="ports-select-box"
              v-model="form.rotateHandleSpeedLimit"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="正常" :value="0"></el-option>
              <el-option label="限速6Km" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="缓启动" prop="slowStart">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.slowStart"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option v-for="item in slowStartData" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="轮径" prop="wheelDiameter">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.wheelDiameter"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
                @change="changeCountPerimeter"
              >
                <el-option
                  v-for="(value, key) in wheelDiameterData"
                  :key="key"
                  :label="value"
                  :value="+key"
                >
                </el-option>
              </el-select>
              <span class="unit-title">inch</span>
            </div>
          </el-form-item>

          <el-form-item label="周长" prop="perimeter">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model.number="form.perimeter"
                oninput="value=value.replace(/[^\d]/, '')"
              ></el-input>
              <span class="unit-title">mm</span>
            </div>
          </el-form-item>

          <el-form-item label="显示单位" prop="unit">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.unit"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dicts_unit"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="+item.dictValue"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="协议" prop="agreement">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.agreement"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dicts_agreement"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="+item.dictValue"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="电量计算方式" prop="power">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.power"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dicts_power"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="测速磁钢数" prop="speedSteel">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.speedSteel"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option v-for="item in speedSteelData" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="电量变化时间" prop="batteryVoltageChangeTime">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.batteryVoltageChangeTime"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in batteryVoltageChangeTimeData"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <span class="unit-title">s</span>
            </div>
          </el-form-item>

          <el-form-item label="速度平滑等级" prop="smoothLevel">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.smoothLevel"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option v-for="item in smoothLevelData" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="总线故障超时" prop="allLineErrTimeOut">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.allLineErrTimeOut"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in allLineErrTimeOutData"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <span class="unit-title">s</span>
            </div>
          </el-form-item>

          <el-form-item label="蓝牙" prop="bluetooth">
            <el-select
              class="ports-select-box"
              v-model="form.bluetooth"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="1"></el-option>
              <el-option label="NO" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="转把分档" prop="rotateHandle">
            <el-select
              class="ports-select-box"
              v-model="form.rotateHandle"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="1"></el-option>
              <el-option label="NO" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开机密码" prop="turnOnPasswd">
            <el-select
              class="ports-select-box"
              v-model="form.turnOnPasswd"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="0"></el-option>
              <el-option label="NO" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="助力正反" prop="assist">
            <el-select
              class="ports-select-box"
              v-model="form.assist"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="助力正" :value="0"></el-option>
              <el-option label="助力反" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车名" prop="ebikeName">
            <el-select
              class="ports-select-box"
              v-model="form.ebikeName"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option
                v-for="(value, key) in dicts_ebike"
                :key="+key"
                :label="value"
                :value="+key"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="车型" prop="carModel">
            <el-input class="ipt-box" v-model="form.carModel" maxlength="2"></el-input>
          </el-form-item>

          <el-form-item label="默认档位" prop="defaultGear">
            <el-input
              class="ipt-box"
              v-model="form.defaultGear"
              oninput="value=value.replace(/[^\d.]/g, '')"
            ></el-input>
          </el-form-item>
          <el-form-item label="Logo界面" prop="logo">
            <el-select
              class="ports-select-box"
              v-model="form.logo"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dicts_logo"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开机密码" prop="startupPasswd">
            <el-input
              class="ipt-box"
              v-model="form.startupPasswd"
              oninput="value=value.replace(/[^\d.]/g, '')"
            ></el-input>
          </el-form-item>

          <el-form-item label="高级菜单密码" prop="highMenuPasswd">
            <el-input
              class="ipt-box"
              v-model="form.highMenuPasswd"
              oninput="value=value.replace(/[^\d.]/g, '')"
            ></el-input>
          </el-form-item>

          <el-form-item label="电机功率" prop="motorSys">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model="form.motorSys"
                oninput="value=value.replace(/[^\d.]/g, '')"
              ></el-input>
              <span class="unit-title">W</span>
            </div>
          </el-form-item>

          <el-form-item label="电池容量" prop="batteryCap">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model.number="form.batteryCap"
                oninput="value=value.replace(/[^\d.]/g, '')"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item label="高速蜂鸣器" prop="highSpeedBuzzerRemind">
            <div class="flex align-center">
              <el-input
                class="ipt-box"
                v-model="form.highSpeedBuzzerRemind"
                oninput="value=value.replace(/[^\d.]/g, '')"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="串口通讯电平" prop="serialLevel">
            <div class="flex align-center">
              <el-select
                class="ports-select-box"
                v-model="form.serialLevel"
                filterable
                clearable
                suffix-icon="CaretBottom"
                placeholder="请选择"
              >
                <el-option
                  v-for="(value, key) in serialLevelLogData"
                  :key="key"
                  :label="value"
                  :value="+key"
                >
                </el-option>
              </el-select>

              <span class="unit-title">V</span>
            </div>
          </el-form-item>

          <el-form-item label="推车助力" prop="driveAssist">
            <el-select
              class="ports-select-box"
              v-model="form.driveAssist"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="1"></el-option>
              <el-option label="NO" :value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="蜂鸣器开关" prop="buzzerSwitch">
            <el-select
              class="ports-select-box"
              v-model="form.buzzerSwitch"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="0"></el-option>
              <el-option label="NO" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单密码" prop="menuPassword">
            <el-select
              class="ports-select-box"
              v-model="form.menuPassword"
              filterable
              clearable
              suffix-icon="CaretBottom"
              placeholder="请选择"
            >
              <el-option label="YES" :value="0"></el-option>
              <el-option label="NO" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script lang='ts' setup>
import { watchEffect, ref, reactive, onMounted } from 'vue'

// hooks
import { useCommonTools } from '@renderer/hooks/commonTools'
const commonTools = useCommonTools()

const props = defineProps(['configData'])

let form = ref<any>({
  backlightBrightness: '',
  sleepTime: '',
  voltage: '',
  undervoltage: 31.5,
  assistPercentage: '128',
  currentlimiting: 12,
  showWheelsize: '',
  tiresSize: '0',
  powerGear: '',
  assistStartMagnetNumber: '',
  assistLimit: '25',
  factoryReset: '',
  cruise: '',
  rotateHandleSpeedLimit: 0,
  slowStart: '1',
  wheelDiameter: 5,
  perimeter: 0,
  unit: '',
  agreement: '',
  power: '',
  speedSteel: 1,
  batteryVoltageChangeTime: '10',
  smoothLevel: '3',
  allLineErrTimeOut: '10',
  bluetooth: '',
  rotateHandle: 0,
  turnOnPasswd: '',
  assist: 0,
  ebikeName: '',
  carModel: '',
  defaultGear: '',
  logo: '0',
  startupPasswd: '2020',
  highMenuPasswd: '2020',
  motorSys: '',
  batteryCap: 0,
  highSpeedBuzzerRemind: '0',
  serialLevel: 1,
  driveAssist: 1,
  buzzerSwitch: 0,
  menuPassword: 0
})

//   背光亮度
const backlightBrightnessList = {
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 'AUTO'
}

// 休眠时间
const sleepTimeList = [...Array(11)].map((v, i) => i)
//   助力档位数
const powerGearData = [3, 4, 5, 9]
// 助力开始磁钢数
const assistStartMagnetNumberData = [...Array(63)].map((v, i) => String(i + 2))
// 助力限速门限
const assistLimitData = [...Array(256)].map((v, i) => String(i))
// 缓启动参数
const slowStartData = ['0', '1', '2', '3']
// 测速磁钢数
const speedSteelData = [...Array(16)].map((v, i) => i)
// 电量变化时间
const batteryVoltageChangeTimeData = [...Array(60)].map((v, i) => String(i + 1))
// 速度平滑等级
const smoothLevelData = [...Array(11)].map((v, i) => String(i))
// 总线故障超时时间
const allLineErrTimeOutData = [...Array(251)].map((v, i) => String(i + 5))
// 串口通讯电平
const serialLevelLogData = {
  0: '3.3',
  1: '5'
}
// 轮径
const wheelDiameterData = {
  0: 16,
  1: 18,
  2: 20,
  3: 22,
  4: 24,
  5: 26,
  6: '700C',
  7: 28
}
for (let i = 8; i < 100; i++) {
  wheelDiameterData[i] = i * 0.5
}

const changeCountPerimeter = (wheelDiameter) => {
  let wheelDiameterVal
  if (wheelDiameter === 6) {
    wheelDiameterVal = 27.5
  } else {
    wheelDiameterVal = wheelDiameterData[wheelDiameter]
  }
  form.value.perimeter = parseInt(String(wheelDiameterVal * 25.4 * 3.14))
}

interface labelValueType {
  dictLabel
  dictValue
}
// 仪表电压
let dicts_voltage = reactive([])
let dicts_unit = reactive<labelValueType[]>([])
let dicts_agreement = reactive<labelValueType[]>([])
let dicts_power = reactive<labelValueType[]>([])
let dicts_ebike = reactive({})
let dicts_logo = reactive<labelValueType[]>([])

// 欠压门限
const changeVoltage = (voltageVal) => {
  let voltage
  switch (voltageVal) {
    case 24:
      voltage = 22
      break
    case 36:
      voltage = 31.5
      break
    case 48:
      voltage = 42
      break
    case 52:
      voltage = 45
      break
    case 60:
      voltage = 54
      break
    case 72:
      voltage = 62
      break
  }
  form.value.undervoltage = voltage
}

onMounted(() => {
  commonTools.getDicts('instrument_voltage').then((res: any) => {
    dicts_voltage = res.data.map(({ dictValue }) => +dictValue)
  })

  //仪表单位
  commonTools.getDicts('instrument_unit').then((res: any) => {
    dicts_unit = res.data
  })

  //仪表协议
  commonTools.getDicts('instrument_agreement').then((res: any) => {
    dicts_agreement = res.data
  })

  //仪表协议
  commonTools.getDicts('instrument_power').then((res: any) => {
    dicts_power = res.data
  })

  //仪表LOGO界面
  commonTools.getDicts('instrument_logo').then((res: any) => {
    dicts_logo = res.data
  })

  // 车名
  getConfigDicts('instrument_ebike_name', dicts_ebike)
  console.log('dicts_ebike', dicts_ebike)
})

// 配置字典
const getConfigDicts = (dictName, currentData) => {
  try {
    commonTools.getDicts(dictName).then((res: any) => {
      res.data.forEach(({ dictLabel, dictValue }) => {
        currentData[dictValue] = dictLabel
      })
    })
  } catch (error: any) {
    throw new Error(error)
  }
}

const handleSetConfigValueType = (configData) => {
  const {
    backlightBrightness,
    sleepTime,
    voltage,
    undervoltage,
    powerGear,
    assistStartMagnetNumber,
    assistPercentage,
    currentlimiting,
    assistLimit,
    showWheelsize,
    slowStart,
    wheelDiameter,
    perimeter,
    unit,
    agreement,
    power,
    speedSteel,
    batteryVoltageChangeTime,
    smoothLevel,
    allLineErrTimeOut,
    ebikeName,
    carModel,
    defaultGear,
    logo,
    startupPasswd,
    highMenuPasswd,
    motorSys,
    batteryCap,
    highSpeedBuzzerRemind,
    tiresSize,
    bluetooth,
    driveAssist,
    factoryReset,
    rotateHandle,
    buzzerSwitch,
    cruise,
    turnOnPasswd,
    menuPassword,
    rotateHandleSpeedLimit,
    assist,
    serialLevel
  } = configData

  const instrumentModel = {
    backlightBrightness: Number(backlightBrightness),
    sleepTime: Number(sleepTime),
    voltage: Number(voltage),
    undervoltage: Number(undervoltage),
    powerGear: Number(powerGear),
    assistStartMagnetNumber: String(assistStartMagnetNumber),
    assistPercentage: String(assistPercentage),
    currentlimiting: Number(currentlimiting),
    assistLimit: String(assistLimit),
    showWheelsize: String(showWheelsize),
    slowStart: String(slowStart),
    wheelDiameter: Number(wheelDiameter),
    perimeter: Number(perimeter),
    unit: Number(unit),
    agreement: Number(agreement),
    power: String(power),
    speedSteel: Number(speedSteel),
    batteryVoltageChangeTime: String(batteryVoltageChangeTime),
    smoothLevel: String(smoothLevel),
    allLineErrTimeOut: String(allLineErrTimeOut),
    ebikeName: Number(ebikeName),
    carModel: String(carModel),
    defaultGear: String(defaultGear),
    logo: String(logo),
    startupPasswd: String(startupPasswd),
    highMenuPasswd: String(highMenuPasswd),
    menuPasswd: String(highMenuPasswd),
    motorSys: String(motorSys),
    batteryCap: Number(batteryCap),
    highSpeedBuzzerRemind: String(highSpeedBuzzerRemind),
    tiresSize: String(tiresSize),
    bluetooth: Number(bluetooth),
    driveAssist: Number(driveAssist),
    factoryReset: Number(factoryReset),
    rotateHandle: Number(rotateHandle),
    buzzerSwitch: Number(buzzerSwitch),
    cruise: Number(cruise),
    turnOnPasswd: Number(turnOnPasswd),
    menuPassword: Number(menuPassword),
    rotateHandleSpeedLimit: Number(rotateHandleSpeedLimit),
    assist: Number(assist),
    serialLevel: Number(serialLevel)
  }

  return instrumentModel
}

defineExpose({
  form
})

watchEffect(() => {
  console.log('props.configData', props.configData, Object.keys(props.configData))
  if (Object.keys(props.configData).length) {
    form.value = handleSetConfigValueType(props.configData)

    console.log('form1', form)
  }
})
</script>
<style lang="scss">
.el-scrollbar-box {
  .is-horizontal {
    display: none !important;
  }

  .params-config-box {
    .el-form-item__label {
      color: #fff;
      width: 100px;
    }
  }
}
</style>
<style lang='scss' scoped>
.el-scrollbar-box {
  .params-config-box {
    padding: 18px 12px;
    .unit-title {
      color: #fff;
      width: 45px;
      margin-left: 7px;
      font-size: 12px;
    }

    .el-select,
    .el-input {
      width: 150px;
    }
  }
}
</style>